<template>
  <div>
    <!--终端设置配送信息审批-->
    <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
      <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
        <el-col :span="8">
          <el-form-item label="流程编号：" style="width: 100%;">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：" style="width: 100%;">
            {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：" style="width: 100%;">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <item-title title="终端信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端名称：" style="width: 100%;">
            {{ detailData.data?.devInfo?.terminalName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端编号：" style="width: 100%;">
            {{ detailData.data?.devInfo?.terminalNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端类型：" style="width: 100%;">
            {{ getLabel('app_mode', detailData.data?.devInfo?.terminalType) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在地区：" style="width: 100%;">
            <span>{{ detailData.data?.devInfo?.provinceName }}/{{ detailData.data?.devInfo?.cityName }}/{{
              detailData.data?.devInfo?.areaName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品信息：" style="width: 100%;">
            <el-link type="primary" :underline="false" @click="handlLink">
              {{ getProductName(detailData.data?.devInfo) }}
            </el-link>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端价：" style="width: 100%;">
            {{ detailData.data?.devInfo?.terminalPrice }}
            <span v-if="detailData.data?.devInfo?.sellUnit">
              元/{{ getLabel('sell_unit', detailData.data?.devInfo?.sellUnit) }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营销模式：" style="width: 100%;">
            <div v-if="detailData.data?.devInfo?.sellMode !== 'direct'">
              {{detailData.data?.devInfo?.agentAttribute === '1' ? '区域招商' : '精细招商'}}
            </div>
            <div v-else>
              终端直销
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责营销职员：" style="width: 100%;">
            <span>{{ detailData.data?.devInfo?.headName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="detailData?.data?.devInfo?.agentName">
          <el-form-item label="代理商名称：" style="width: 100%;">
            {{detailData.data?.devInfo?.agentName }}
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <item-title title="配送服务信息" />
        </el-col>

        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <table-view :data="detailData.data?.DistributeUpdatesInfo" header-cell-class-name="table-header"
            size="medium">
            <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="配送模式" header-align="center" :show-overflow-tooltip="true">
              <template #default="{row}">
                {{ getLabel('distributor_mode', row.rddType) }}
              </template>
            </el-table-column>
            <el-table-column prop="distributeName" label="配送商" header-align="center" :show-overflow-tooltip="true" />
            <el-table-column prop="distributePrice" label="配送费" align="center" :show-overflow-tooltip="true">
              <template #default="{row}">
                <div v-if="row.computeMode==='固定价格'">
                  <span v-if="row.distributePrice > 0">{{ isInteger(row.distributePrice) }}元</span>
                  <span v-if="detailData.data?.devInfo?.sellUnit"> /
                    {{ getLabel('sell_unit',detailData.data?.devInfo?.sellUnit) }}</span>
                </div>
                <div v-if="row.computeMode==='终端价百分比'">
                  <span>{{ row.distributePrice }}%</span><span>终端价</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="distributeServeNo" label="配送服务编号" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="本次设置类型" header-align="center" :show-overflow-tooltip="true">
              <template #default="{row}">
                <div style="height: 20px;line-height: 20px">
                  <span v-if="row.updateType === 1">新增配送</span>
                  <span v-if="row.updateType === 2">取消配送</span>
                </div>
              </template>
            </el-table-column>
          </table-view>
        </el-col>

      </el-row>
    </el-form>
    <detail-drawer ref="proDetailDrawer" custom-title>
      <template #title>
        <span>{{ detailData.data?.devInfo?.productPopularName }}-{{ detailData.data?.devInfo?.approvalNumber }}-{{
          detailData.data?.devInfo?.packSpecs }}</span>
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <product-base-info v-if="productId" :id="productId" />
          </div>
          <div class="history-list">
            <item-title title="修改记录" />
            <operation-view :id="productId" mode="product" />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import { defineAsyncComponent, reactive, toRefs, watch } from "vue";

export default {
  name: "TerminalDistribution",
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  components: {
    productBaseInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/product/productBaseInfo.vue"
      )
    ),
  },
  setup(props) {
    var data = reactive({
      detailData: {},
      productId: 0,
      proDetailDrawer: null,
    });
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          data.productId = data.detailData.data?.devInfo?.productId;
          console.log(data.detailData, "-=-=--=-3332333=-=-==");
        }
      },
      { immediate: true, deep: true }
    );
    const handlLink = () => {
      data.proDetailDrawer.open();
    };
    return {
      ...toRefs(data),
      handlLink,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>